<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>登录界面</title>  
    <style>  
        body {  
            font-family: Arial, sans-serif;  
            display: flex;  
            justify-content: center;  
            align-items: center;  
            height: 100vh;  
            background-color: #f0f0f0;  
        }  
        .login-container {  
            background-color: #fff;  
            padding: 20px;  
            border-radius: 8px;  
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);  
        }  
        h2 {  
            text-align: center;  
        }  
        .form-group {  
            display: flex; 
            align-items: center; 
            margin-bottom: 15px;  
        }  
        .form-group label {  
            margin-right: 10px; 
            flex-grow: 0; 
        }  
        .form-group input {  
            flex-grow: 1; 
            padding: 8px;  
            box-sizing: border-box;  
        }  
        .form-group button {  
            width: 100%;  
            background-color: #007bff;  
            color: white;  
            padding: 10px;  
            border: none;  
            border-radius: 4px;  
            cursor: pointer;  
        }  
        .form-group button:hover {  
            background-color: #0056b3;  
        }  
    </style>  
    <script type="text/javascript" src="js/jquery-3.6.0.min.js" ></script>
	<script type="text/javascript">
		function setCookie(name, value, days) {  
		    let expires = "";  
		    if (days) {  
		        const date = new Date();  
		        date.setTime(date.getTime() + (days*24*60*60*1000));  
		        expires = "; expires=" + date.toUTCString();  
		    }  
		    document.cookie = name + "=" + (value || "")  + expires + "; path=/";  
		}  
		
		$(function(){
			$("#login").click(function(){
				var json_str = JSON.stringify({"email":$("#email").val(),"password":$("#password").val()});
				$.ajax({
					type:"post",
					data:json_str,
					url:"/experiment05/user/login",
					contentType : "application/json",
					success:function(data){
						if(data.code == "10000") {
							 setCookie("username", $("#email").val(), 1);
							 window.location.href = "../index.html";
							alert("欢迎光临！");
						} else{
							alert(data.msg);
						}
					}
				})
			})
		})
	</script>
</head>  
<body>  
    <div class="login-container">  
        <h2>登录</h2>  
        <form action="login" method="post">  
            <div class="form-group">  
                <label for="username">邮箱:</label>  
                <input type="text" id="email" name="email" required>  
            </div>  
            <div class="form-group">  
                <label for="password">密码:</label>  
                <input type="password" id="password" name="password" required>  
            </div>  
            <div class="form-group">  
                <button id="login" type="button">登录</button>  
            </div>  
        </form>  
    </div>  
</body>  
</html>